<template>
  <!-- 发布房源 -->
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <van-cell-group>
      <div class="title">房源信息</div>
      <van-cell
        title="小区名称"
        is-link
        :value="districtName"
        @click="$router.push('/inquire')"
      />
      <van-field v-model="price" label="租金" placeholder="请输入租金/月">
        <template #extra> ￥/月 </template>
      </van-field>
      <van-field v-model="area" label="建筑面积" placeholder="请输入建筑面积">
        <template #extra> m² </template>
      </van-field>
      <!-- <van-cell title="户型" is-link value="请选择"> </van-cell>
       -->
      <van-field
        readonly
        name="picker"
        :value="houseTypeName"
        label="户型"
        input-align="right"
        placeholder="请选择"
        right-icon="arrow"
        @click="houseType = true"
      />
      <van-popup v-model="houseType" position="bottom">
        <van-picker
          show-toolbar
          :columns="houseTypeList"
          @confirm="houseTypeClick"
          @cancel="houseType = false"
        />
      </van-popup>
      <van-field
        readonly
        name="picker"
        :value="floorName"
        label="所在楼层"
        input-align="right"
        placeholder="请选择"
        right-icon="arrow"
        @click="floorType = true"
      />
      <van-popup v-model="floorType" position="bottom">
        <van-picker
          show-toolbar
          :columns="floorList"
          @confirm="floorClick"
          @cancel="floorType = false"
        />
      </van-popup>
      <van-field
        readonly
        name="picker"
        :value="orientationName"
        label="所在楼层"
        input-align="right"
        placeholder="请选择"
        right-icon="arrow"
        @click="orientationType = true"
      />
      <van-popup v-model="orientationType" position="bottom">
        <van-picker
          show-toolbar
          :columns="orientationList"
          @confirm="orientationClick"
          @cancel="orientationType = false"
        />
      </van-popup>
      <van-cell title="房屋标题" />
      <van-field
        v-model="title"
        placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
        input-align="left"
      />
      <van-cell title="房屋图像" />
      <van-field name="uploader">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
    </van-cell-group>
    <van-cell title="房屋配置" />
    <van-grid :column-num="5" class="configuration" :border="false">
      <van-grid-item
        v-for="(value, keys) in mating"
        :key="keys"
        @click="select(keys)"
        :class="{ pitch: houseSet.includes(keys) }"
      >
        <van-icon
          class="iconfont"
          class-prefix="icon"
          :name="value"
          size="20"
        />
        <p>{{ keys }}</p>
      </van-grid-item>
    </van-grid>
    <div class="interval"></div>
    <van-cell title="房屋描述" />
    <van-field
      v-model="describe"
      placeholder="请输入房屋描述信息"
      input-align="left"
      type="textarea"
    />
    <div class="footinterval"></div>
    <div class="foot">
      <van-button type="primary" class="cancel" @click="cancelFrom"
        >取消</van-button
      >
      <van-button type="primary" class="submit" @click="commitFrom"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { condition, addImg } from '@/api/city'
export default {
  name: 'issue-page',
  async created () {
    const data = await condition()
    console.log(data)
    this.rule = data.body
  },
  data () {
    return {
      price: '',
      area: '',
      describe: '',
      title: '',
      houseTypeName: '',
      houseTypeList: ['一室', '两室', '三室', '四室', '四室+'],
      houseType: false,
      floorName: '',
      floorList: ['高楼层', '中楼层', '低楼层'],
      floorType: false,
      orientationName: '',
      orientationList: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      orientationType: false,
      uploader: [],
      mating: {
        电视: 'dianshi',
        冰箱: 'bingxiang',
        洗衣机: 'xiyiji',
        空调: 'kongdiao',
        热水器: 'reshuiqi',
        沙发: 'haofangtuo400iconfont2shafa',
        暖气: 'nuanqi',
        宽带: 'wifi',
        衣柜: 'yigui-hui',
        天然气: 'tianranqi'
      },
      houseSet: [],
      rule: []
    }
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    houseTypeClick (value) {
      this.houseTypeName = value
      this.houseType = false
    },
    floorClick (value) {
      this.floorName = value
      this.floorType = false
    },
    orientationClick (value) {
      this.orientationName = value
      this.orientationType = false
    },
    select (kname) {
      console.log(kname)
      if (!this.houseSet.includes(kname)) {
        this.houseSet.push(kname)
      } else {
        this.houseSet = this.houseSet.filter(item => item !== kname)
      }
    },
    async commitFrom () {
      if (this.uploader.length === 0) {
        this.$toast('请选择图片')
        return
      }
      const fromDate = new FormData()
      this.uploader.forEach(item => fromDate.append('file', item.file))
      const a = await addImg(fromDate)
      console.log(a)
      // const data = await issueHouse({
      //   title: this.title,
      //   description: this.describe,
      //   houseImg: this.uploader.forEach(item => )
      // })
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否提交',
          confirmButtonText: '继续发布',
          cancelButtonText: '去查看'
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    },
    cancelFrom () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否取消',
          confirmButtonText: '继续编辑',
          cancelButtonText: '放弃编辑'
        })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          this.$router.push('/homepage')
        })
    }
  },
  computed: {
    ...mapState('user', ['districtName'])
  }
}
</script>

<style scoped lang="less">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.title {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #21b97a;
  padding-left: 15px;
  border-bottom: 1px solid #f5f5f6;
}
.image {
  padding-left: 10px;
}
.configuration {
  p {
    font-size: 14px;
    margin-top: 5px;
  }
  .pitch {
    color: #21b97a;
  }
}
.interval {
  width: 100%;
  height: 20px;
  background-color: #f6f5f6;
}
.footinterval {
  height: 25px;
  width: 100%;
  background-color: #f5f5f9;
  margin-bottom: 50px;
}
.foot {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  .submit {
    flex: 1;
    border: none;
    height: 50px;
    font-size: 16px;
  }
  .cancel {
    flex: 1;
    background-color: #fff;
    color: #21b97a;
    font-size: 16px;
    border: none;
    height: 50px;
  }
}
</style>
